//构造函数
function Page(el, options = {}) {
    this.el = document.querySelector(el)
    this.options = options
    this.init()
}
//两个小开关
Page.prototype.init = function () {
    this.bindEvent()
    this.createTag()
}
//点击事件
Page.prototype.bindEvent = function () {
    this.el.onclick = (e) => {
    let evt = e || window.event
    let target = evt.target || evt.srcElement
    if (target.nodeName === 'P') {
    switch (target.innerText) {
    case this.options.pageTag.first:
    this.options.pageInfo.pageNum = 1
    break;
    case this.options.pageTag.prev:
    if (this.options.pageInfo.pageNum === 1) 
    return
    this.options.pageInfo.pageNum--
    break;
    case this.options.pageTag.next:
    if (this.options.pageInfo.pageNum === this.options.pageInfo.totalPage) return
    this.options.pageInfo.pageNum++
    break;
    case this.options.pageTag.last:
    this.options.pageInfo.pageNum = this.options.pageInfo.totalPage
    break;
    default:
    if (parseInt(target.innerHTML) > 0) {
    this.options.pageInfo.pageNum = parseInt(target.innerHTML)
    }
    break;
    }
    this.createTag()
    }
    }

}
Page.prototype.createTag = function () {
    this.el.innerHTML = ''
    let pageTag = this.options.pageTag
    for (let key in pageTag) {
        this.createP('p', pageTag[key], this.el)
    }
    this.createNum()
}

Page.prototype.createNum = function () {
    let tag3Obj = this.el.querySelector('p:nth-child(3)')
    tag3Obj.style.border = 'none'
    tag3Obj.style.margin = '0px'
    tag3Obj.style.padding = '0px'
    let pageNum = this.options.pageInfo.pageNum
    this.options.pageInfo.totalPage = Math.ceil(this.options.pageInfo.totalData / this.options.pageInfo.pageSize)
    let totalPage = this.options.pageInfo.totalPage
    if (totalPage < 7) {
        for (let i = 1; i <= totalPage; i++) this.createP('p', i, tag3Obj)
    } else if (pageNum < 5) {
        for (let i = 1; i <= 5; i++) this.createP('p', i, tag3Obj)
        this.createP('p', '...', tag3Obj)
        this.createP('p', totalPage - 1, tag3Obj)
        this.createP('p', totalPage, tag3Obj)
    } else if (pageNum == 5) {
        for (let i = 1; i <= 7; i++) this.createP('p', i, tag3Obj)
        this.createP('p', '...', tag3Obj)
        this.createP('p', totalPage - 1, tag3Obj)
        this.createP('p', totalPage, tag3Obj)
    } else if (pageNum > 5 && pageNum < totalPage - 4) {
        for (let i = 1; i <= 2; i++) this.createP('p', i, tag3Obj)
        this.createP('p', '...', tag3Obj)
        this.createP('p', pageNum - 2, tag3Obj)
        this.createP('p', pageNum - 1, tag3Obj)
        this.createP('p', pageNum, tag3Obj)
        this.createP('p', pageNum + 1, tag3Obj)
        this.createP('p', pageNum + 2, tag3Obj)
        this.createP('p', '...', tag3Obj)
        this.createP('p', totalPage - 1, tag3Obj)
        this.createP('p', totalPage, tag3Obj)
    } else if (pageNum >= totalPage - 4) {
        for (let i = 1; i <= 2; i++) this.createP('p', i, tag3Obj)
        this.createP('p', '...', tag3Obj)
        for (let i = totalPage - 4; i <= totalPage; i++) this.createP('p', i, tag3Obj)
    }
}

Page.prototype.createP = function (tagName, content, fatherObj) {
    let pObj = document.createElement(tagName)
    pObj.innerText = content
    pObj.style.border = 'solid 1px black'
    pObj.style.margin = '0 5px'
    pObj.style.padding = '0 5px'
    pObj.style.display = 'inline-block'
    if (content === this.options.pageInfo.pageNum) pObj.style.background = 'orange'
    fatherObj.appendChild(pObj)
}
